<template>
  <div id="leftThreeChart">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      AlarmStatisticList: [
        // 近一天每10分钟的报警数据 - 从2025-09-16 08:00开始到2025-09-17 08:00，共144个数据点
        {"DateTime": "2025-09-16 08:00:00", "AlarmCount": 1, "AlarmCancelCount": 0, "HighAlarmCount": 0, "MidAlarmCount": 0, "LowAlarmCount": 1},
        {"DateTime": "2025-09-16 08:10:00", "AlarmCount": 0, "AlarmCancelCount": 0, "HighAlarmCount": 0, "MidAlarmCount": 0, "LowAlarmCount": 0},
        {"DateTime": "2025-09-16 08:20:00", "AlarmCount": 0, "AlarmCancelCount": 0, "HighAlarmCount": 0, "MidAlarmCount": 0, "LowAlarmCount": 0},
        {"DateTime": "2025-09-16 08:30:00", "AlarmCount": 0, "AlarmCancelCount": 0, "HighAlarmCount": 0, "MidAlarmCount": 0, "LowAlarmCount": 0},
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('leftThreeChart'))

      // 准备图表数据 - 处理10分钟级时间数据
      const times = this.AlarmStatisticList.map(item => {
        const date = new Date(item.DateTime)
        const hours = date.getHours().toString().padStart(2, '0')
        const minutes = date.getMinutes().toString().padStart(2, '0')
        return `${hours}:${minutes}`
      })
      const alarmCounts = this.AlarmStatisticList.map(item => item.AlarmCount)
      const alarmCancelCounts = this.AlarmStatisticList.map(item => item.AlarmCancelCount)
      const highAlarmCounts = this.AlarmStatisticList.map(item => item.HighAlarmCount)
      const midAlarmCounts = this.AlarmStatisticList.map(item => item.MidAlarmCount)
      const lowAlarmCounts = this.AlarmStatisticList.map(item => item.LowAlarmCount)

      const option = {
        // 工具箱配置 - 右上角功能区
        toolbox: {
          feature: {
            // 图表类型切换
            magicType: {
              type: ['bar', 'line'],
              title: {
                bar: '切换为柱状图',
                line: '切换为折线图'
              }
            },
            // 搜索功能（自定义图标）
            mySearch: {
              show: true,
              title: '搜索',
              icon: 'M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.9zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116 65.6-158.4C296 211.3 352.2 188 412 188s116 23.3 158.4 65.6S636 352.2 636 412s-23.3 116-65.6 158.4z',
              onclick: () => {
                this.handleSearch()
              }
            },
          },
          right: '-5px',
          top: '-5px'
        },
        // 图例
        legend: {
          data: ['近一天每10分钟报警', '报警取消数量', '一级', '二级', '三级'],
          top: '30px',
          left: 'center',
          selected: {
            '近一天每10分钟报警': true,
            '报警取消数量': false,
            '一级': false,
            '二级': false,
            '三级': false
          }
        },
        // 网格配置
        grid: {
          left: '10px',
          right: '10px',
          top: '80px',
          bottom: '30px',
          containLabel: true
        },
        // X轴配置
        xAxis: {
          type: 'category',
          data: times,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            interval: 5 // 每6个标签显示一个，避免过于密集
          }
        },
        // Y轴配置
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: true,
            length: 4,
            lineStyle: {
              color: '#666',
              type: 'solid'
            },
            inside: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e0e0e0'
            }
          }
        },
        // 系列数据 - 默认展示柱状图
        series: [
          {
            name: '近一天每10分钟报警',
            type: 'bar',
            data: alarmCounts,
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: '报警取消数量',
            type: 'bar',
            data: alarmCancelCounts,
            itemStyle: {
              color: '#92cc76'
            }
          },
          {
            name: '一级',
            type: 'bar',
            data: highAlarmCounts,
            itemStyle: {
              color: '#fac858'
            }
          },
          {
            name: '二级',
            type: 'bar',
            data: midAlarmCounts,
            itemStyle: {
              color: '#ef6666'
            }
          },
          {
            name: '三级',
            type: 'bar',
            data: lowAlarmCounts,
            itemStyle: {
              color: '#73c0de'
            }
          }
        ],
        // 底部区间调节功能
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 100,
            height: 20,
            bottom: 10,
            left: '20px',
            right: '10px',
            handleStyle: {
              color: '#5470c6'
            },
            textStyle: {
              color: '#666',
              fontSize: 10
            },
            borderColor: 'transparent',
            backgroundColor: '#f5f5f5'
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = params[0].axisValue + '<br/>'
            params.forEach(param => {
              result += param.marker + param.seriesName + ': ' + param.value + '<br/>'
            })
            return result
          }
        }
      }

      chart.setOption(option)

      // 响应式调整
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },

    // 搜索功能处理函数
    handleSearch() {
      console.log('搜索功能被点击')
      this.$emit('search')
    },
  }
}
</script>

<style lang="scss" scoped>
#leftThreeChart {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 0;
  margin: 0;
}
</style>
